<template>
  <view class="container">
    <!-- Assignment Header -->
    <view class="assignment-header">
      <view class="title-section">
        <text class="title">{{ assignment.title }}</text>
        <view :class="['status-badge', assignment.status.toLowerCase()]">
          {{ assignment.status }}
        </view>
      </view>
      <view class="meta-info">
        <view class="info-item">
          <u-icon name="calendar" size="28" color="#666"></u-icon>
          <text>Due: {{ assignment.dueDate }}</text>
        </view>
        <view class="info-item">
          <u-icon name="star" size="28" color="#666"></u-icon>
          <text>Points: {{ assignment.points }}</text>
        </view>
      </view>
    </view>

    <!-- Assignment Content -->
    <scroll-view scroll-y class="content-section">
      <!-- Description -->
      <view class="section">
        <text class="section-title">Description</text>
        <rich-text :nodes="assignment.description"></rich-text>
      </view>

      <!-- Requirements -->
      <view class="section">
        <text class="section-title">Requirements</text>
        <view class="requirements-list">
          <view 
            v-for="(req, index) in assignment.requirements" 
            :key="index"
            class="requirement-item"
          >
            <u-icon name="checkmark-circle" size="28" color="#4b7bec"></u-icon>
            <text>{{ req }}</text>
          </view>
        </view>
      </view>

      <!-- Attachments -->
      <view class="section" v-if="assignment.attachments.length">
        <text class="section-title">Reference Materials</text>
        <view 
          v-for="(file, index) in assignment.attachments" 
          :key="index"
          class="attachment-item"
          @click="downloadFile(file)"
        >
          <u-icon :name="getFileIcon(file.type)" size="40" color="#4b7bec"></u-icon>
          <view class="file-info">
            <text class="file-name">{{ file.name }}</text>
            <text class="file-size">{{ file.size }}</text>
          </view>
          <u-icon name="download" color="#4b7bec" size="32"></u-icon>
        </view>
      </view>

      <!-- Submission Section -->
      <view class="section">
        <text class="section-title">Your Submission</text>
        <view v-if="assignment.submission" class="submission-info">
          <view class="submission-meta">
            <text>Submitted on {{ assignment.submission.date }}</text>
            <text class="grade" v-if="assignment.submission.grade">
              Grade: {{ assignment.submission.grade }}/{{ assignment.points }}
            </text>
          </view>
          <view class="submitted-files">
            <view 
              v-for="(file, index) in assignment.submission.files" 
              :key="index"
              class="file-item"
            >
              <u-icon :name="getFileIcon(file.type)" size="32" color="#4b7bec"></u-icon>
              <text>{{ file.name }}</text>
            </view>
          </view>
        </view>
        <view v-else class="upload-section">
          <u-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deleteFile"
            :maxCount="5"
          ></u-upload>
          <text class="upload-hint">Supported formats: PDF, DOC, DOCX, JPG, PNG (Max 10MB)</text>
        </view>
      </view>
    </scroll-view>

    <!-- Action Button -->
    <view class="action-button" v-if="!assignment.submission">
      <u-button 
        type="primary"
        :disabled="fileList.length === 0"
        @click="submitAssignment"
      >Submit Assignment</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      assignmentId: null,
      fileList: [],
      assignment: {
        title: 'Case Study: Cardiovascular Disease',
        status: 'Pending',
        dueDate: '2024-03-25 23:59',
        points: 100,
        description: 'Analyze the provided case study of a patient with cardiovascular disease...',
        requirements: [
          'Complete patient history analysis',
          'Identify key symptoms and risk factors',
          'Propose treatment plan',
          'Include relevant research citations'
        ],
        attachments: [
          {
            name: 'Case Study Document.pdf',
            type: 'pdf',
            size: '2.5 MB'
          },
          {
            name: 'Reference Guidelines.docx',
            type: 'doc',
            size: '1.2 MB'
          }
        ],
        submission: null
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.assignmentId = options.id
      // TODO: Fetch assignment data
    }
  },
  methods: {
    getFileIcon(type) {
      const icons = {
        pdf: 'file-text',
        doc: 'file-word',
        jpg: 'image',
        png: 'image',
        default: 'file'
      }
      return icons[type] || icons.default
    },
    downloadFile(file) {
      // TODO: Implement file download
      uni.showToast({
        title: `Downloading ${file.name}`,
        icon: 'none'
      })
    },
    afterRead(event) {
      const { file } = event.detail
      // TODO: Handle file upload to server
      this.fileList.push({
        url: file.url,
        status: 'success',
        message: file.name
      })
    },
    deleteFile(event) {
      const index = event.detail.index
      this.fileList.splice(index, 1)
    },
    submitAssignment() {
      if (this.fileList.length === 0) {
        uni.showToast({
          title: 'Please upload at least one file',
          icon: 'none'
        })
        return
      }

      // TODO: Implement submission to server
      uni.showLoading({
        title: 'Submitting...'
      })

      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: 'Assignment submitted successfully',
          icon: 'success'
        })
        
        // Navigate back to homework list
        uni.navigateBack()
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.assignment-header {
  background-color: #ffffff;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
      margin-right: 20rpx;
    }

    .status-badge {
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;

      &.pending {
        background-color: rgba(75, 123, 236, 0.1);
        color: #4b7bec;
      }

      &.submitted {
        background-color: rgba(46, 213, 115, 0.1);
        color: #2ed573;
      }

      &.late {
        background-color: rgba(255, 71, 87, 0.1);
        color: #ff4757;
      }
    }
  }

  .meta-info {
    display: flex;
    gap: 30rpx;

    .info-item {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.content-section {
  flex: 1;
  padding-top: 30rpx;

  .section {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
  }
}

.requirements-list {
  .requirement-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 16rpx;

    text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
    }
  }
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-bottom: 20rpx;

  .file-info {
    flex: 1;

    .file-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 4rpx;
    }

    .file-size {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.submission-info {
  .submission-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    text {
      font-size: 26rpx;
      color: #666;

      &.grade {
        color: #4b7bec;
        font-weight: bold;
      }
    }
  }

  .submitted-files {
    .file-item {
      display: flex;
      align-items: center;
      gap: 16rpx;
      padding: 16rpx;
      background-color: #f8f9fa;
      border-radius: 8rpx;
      margin-bottom: 16rpx;

      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.upload-section {
  .upload-hint {
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
  }
}

.action-button {
  padding: 30rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 